<template>
  <div class="wrapper-study">
    <div class="wrapper-menu">
      <div class="item">
        <router-link to="/">首页</router-link>
        <router-link to="/login">登录</router-link>
        <router-link to="/logout">登出</router-link>
        <router-link to="/study">学习首页</router-link>
      </div>
    </div>

    <el-row>
      <h3>枚举值用于展示</h3>
      <el-select v-model="deviceType" placeholder="设备类型" size="small" @change="ddlChanged()">
        <el-option v-for="item in DEVICE_TYPE_ENUM" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-row>

    <div class="el-table">
      <a class="ibtn ibtn-show" title="查看" @click="onClick">
        <el-icon><View /></el-icon>
      </a>
      <a class="ibtn ibtn-edit" title="编辑" @click="onClick">
        <el-icon><Edit /></el-icon>
      </a>
      <a class="ibtn ibtn-del" title="删除" @click="onClick">
        <el-icon><Delete /></el-icon>
      </a>
      <a class="ibtn ibtn-save" title="保存" @click="onClick">
        <el-icon><Finished /></el-icon>
      </a>
      <a class="ibtn ibtn-cancel" title="取消" @click="onClick">
        <el-icon><Close /></el-icon>
      </a>

      <a class="ibtn ibtn-red" title="编辑" @click="onClick">
        <el-icon><Edit /></el-icon>
      </a>
      <a class="ibtn ibtn-red-light" title="编辑" @click="onClick">
        <el-icon><Edit /></el-icon>
      </a>
      <a class="ibtn ibtn-red-dark" title="编辑" @click="onClick">
        <el-icon><Edit /></el-icon>
      </a>

      <a class="ibtn ibtn-green" title="编辑" @click="onClick">
        <el-icon><Edit /></el-icon>
      </a>
      <a class="ibtn ibtn-green-light" title="编辑" @click="onClick">
        <el-icon><Edit /></el-icon>
      </a>
      <a class="ibtn ibtn-green-dark" title="编辑" @click="onClick">
        <el-icon><Edit /></el-icon>
      </a>

      <a class="ibtn ibtn-blue" title="编辑" @click="onClick">
        <el-icon><Edit /></el-icon>
      </a>
      <a class="ibtn ibtn-blue-light" title="编辑" @click="onClick">
        <el-icon><Edit /></el-icon>
      </a>
      <a class="ibtn ibtn-blue-dark" title="编辑" @click="onClick">
        <el-icon><Edit /></el-icon>
      </a>

      <a class="ibtn ibtn-pink" title="编辑" @click="onClick">
        <el-icon><Edit /></el-icon>
      </a>
      <a class="ibtn ibtn-pink-light" title="编辑" @click="onClick">
        <el-icon><Edit /></el-icon>
      </a>
      <a class="ibtn ibtn-pink-dark" title="编辑" @click="onClick">
        <el-icon><Edit /></el-icon>
      </a>

      <a class="ibtn ibtn-tiffany" title="编辑" @click="onClick">
        <el-icon><Edit /></el-icon>
      </a>
      <a class="ibtn ibtn-tiffany-light" title="编辑" @click="onClick">
        <el-icon><Edit /></el-icon>
      </a>
      <a class="ibtn ibtn-tiffany-dark" title="编辑" @click="onClick">
        <el-icon><Edit /></el-icon>
      </a>

      <a class="ibtn ibtn-yellow" title="编辑" @click="onClick">
        <el-icon><Edit /></el-icon>
      </a>
      <a class="ibtn ibtn-yellow-light" title="编辑" @click="onClick">
        <el-icon><Edit /></el-icon>
      </a>
      <a class="ibtn ibtn-yellow-dark" title="编辑" @click="onClick">
        <el-icon><VolunteerActivism /></el-icon>
      </a>
    </div>

    <a>
      <el-icon><VolunteerActivism /></el-icon>aaa
    </a>

    <el-icon><VolunteerActivism /></el-icon>

    <p>{{ message }}</p>

  </div>
</template>

<script>
import { EnumValueMap } from '@/utils/enum'

import VolunteerActivism from '~icons/home/volunteer-activism'

import { defineComponent, ref, onMounted, onBeforeUnmount, watch, computed } from 'vue'
export default defineComponent({
  name: 'StudyView',
  components: { VolunteerActivism },
  setup() {
    //  获取枚举值： DEVICE_TYPE_ENUM.FLOWRATE
    //  获取枚举描述： DEVICE_TYPE_ENUM.getDesc('FLOWRATE')
    //  通过枚举值获取描述： DEVICE_TYPE_ENUM.getDescFromValue('FLOWRATE')
    const DEVICE_TYPE_ENUM = ref(EnumValueMap.DEVICE_TYPE)
    const deviceType = ref('')
    const message = ref('')
    const currentRoute = ref(null)
    const formState = ref({ contents: '' })
    const content = ref('我经常被生活锤得心灰意冷，可我从来都没放弃过。')

    const getContent = (v) => {
      formState.value.contents = v
    }

    const onClick = () => {
      message.value = 'Hello!'
    }

    const ddlChanged = () => {
      console.log('deviceType:', deviceType.value)
    }

    onMounted(() => {
      // console.log('v====>', DEVICE_TYPE_ENUM().FLOWRATE)
      // console.log('v====>', DEVICE_TYPE_ENUM().getDesc('FLOWRATE'))
      // console.log('v====>', DEVICE_TYPE_ENUM().getDescFromValue('FLOWRATE'))
    })
    onBeforeUnmount(() => {})

    watch(
      () => [currentRoute.value, message.value],
      () => {}
    )

    const studyComputed = computed(() => {
      return 0
    })

    return {
      DEVICE_TYPE_ENUM,
      deviceType,
      message,
      currentRoute,
      studyComputed,
      formState,
      content,
      getContent,
      onClick,
      ddlChanged,
    }
  },
})
</script>

<style lang="scss" scoped>
.wrapper-study {
  padding: 12px;
  background-color: #ffffff;
  .wrapper-menu {
    padding: 12px;
    .item {
      a {
        margin-right: 0.5rem;
      }
    }
  }
  .el-table {
    .ibtn {
      display: inline-block;
      white-space: nowrap;
      user-select: none;
      border: none;
      cursor: pointer;
    }
  }
}
</style>
